<template>
<div>
  <div data-module="discover" data-sub="other" id="g_top" class="m-top">&nbsp;</div>
  <div id="g_nav" class="m-subnav">&nbsp;</div>
  <div class="g-db">
    <div class="g-wrap p-prf">
      <!-- 用户信息出错时的 提示 -->
      <div class="n-for404" v-if="!userInfoFlag && !userData">
        <i class="u-errlg u-errlg-404"></i>
        <p class="note s-fc3">很抱歉，你要查找的网页找不到</p>
      </div>
      <!-- 用户所有信息 -->
      <div v-if="userInfoFlag && userData">
        <div class="m-proifo f-cb">
          <dt class="f-pr">
            <img :src=" userData.profile.avatarUrl+'?param=180y180'" />
          </dt>
          <dd>
            <div class="name f-cb">
              <!-- 我的页面中编辑资料按钮 -->
              <div class="f-cb">
              <div class="edit" v-show="userData.profile.userId == parseInt($store.state.userId)">
                <a href="javascript:;" class="u-btn2 u-btn2-1"><i>编辑个人资料</i></a>
              </div>
              <h2 class="wrap f-fl f-cb">
                <!-- 昵称 -->
                <span class="tit f-ff2 s-fc0 f-thide">{{
                  userData.profile.nickname
                }}</span>
                    <!-- VIP等级 -->
                <span class="lev u-lev u-icn2 u-icn2-lev" v-if="userData.level"
                  ><i class="right u-icn2 u-icn2-levr"></i
                  >{{ userData.level }}</span
                >
                <i class="icn u-icn u-icn-02"></i>
              </h2>
               <!-- 发私信 关注 已关注 相互关注 查看歌手首页等按钮组 -->
              <div style="float: left" v-show="userData.profile.userId !== parseInt($store.state.userId)">
                <a href="javascript:;" class="btn u-btn u-btn-7 f-tdn"
                  ><i>发私信</i></a
                >
                <a href="javascript:;" class="btn u-btn u-btn-8 f-tdn" v-if="!userData.profile.followed">关 注</a>
                <a
                  href="javascript:;"
                  class="btn u-btn u-btn-6 f-tdn"
                  v-if="userData.profile.followed"
                  ><i>已关注</i></a
                >
                <a
                  href="javascript:;"
                  class="btn u-btn u-btn-5 f-tdn"
                  v-if="false"
                  ><i>相互关注</i></a
                >
              </div>
              </div>
              <!-- 作者头衔标签 -->
               <p class="djp f-fs1 s-fc3" v-if="userData.profile.artistIdentity.length">
                <i class="U_tag u-icn2"></i>
                {{userData.profile.allAuthTypes[0].desc}}
                <span class="yyrtag" v-for="(D_item , D_index) in userData.profile.allAuthTypes[0].tags" :key="D_index">{{D_item}}</span>
              </p>
            </div>
              <!-- 用户 动态关注 粉丝 -->
            <ul class="data s-fc3 f-cb">
              <li
                :class="{ fst: index == 0 }"
                v-for="(item, index) in userProfile"
                :key="index"
              >
                <router-link :to="item.p">
                  <strong>{{ item.num }}</strong>
                  <span>{{ item.type }}</span>
                </router-link>
              </li>
            </ul>
              <!-- 用户个人介绍 -->
            <div class="inf s-fc3 f-brk" v-if="userData.profile.signature">
               个人介绍:  {{ userData.profile.signature }}
            </div>
              <!-- 用户所在城市 年龄 -->
            <div class="inf s-fc3">
              <span v-if="userData.profile.city > 1000">所在地区：{{ userData.profile.city| city }}</span>
              <span class="sep" v-if="userData.profile.birthday > 100000" >&nbsp; 年龄 ：<span >{{ userData.profile.birthday | Time}}</span></span>
            </div>
            <div class="inf s-fc3" v-if="bindings.length">
              <span class="tit">社交网络：</span>
              <ul class="U_logo f-cb">
                <li v-for="(w_item , w_index) in bindings" :key="w_index">
                  <a :href="w_item.url" class="u-slg" title="新浪微博" ></a>
                </li>
              </ul>
            </div>
          </dd>
        </div>
        <!-- 用户创建的电台 -->
         <div style="margin-bottom: 24px;" v-if="userCreatedDj_Flag && userCreated_DJdata">
           <div class="Fu-title Fu-title-1 f-cb">
             <h3><span class="f-ff2 s-fc3">{{ userCreated_DJdata[0].name +'创建的电台'}}</span></h3>
           </div>
           <div class="m-plylist m-create f-cb">
             <div :class="['U_itm' , {'bg':index%2 == 1} ]" v-for="(item , index) in userCreated_DJdata" :key="index">
               <a href="" class="col cvr u-cover-3"><img :src="item.picUrl+'?param=50y50'" alt=""></a>
               <div class="col cnt f-pr f-thide">
                 <a href="" class="s-fc1">{{item.name}}</a>
                 <span class="icn u-icn2 u-icn2-share"></span>
               </div>
               <div class="col col-3 s-fc3">订阅{{item.subCount}}次</div>
               <div class="col col-4 s-fc4">{{item.programCount}}期</div>
             </div>
           </div>
         </div>
          <component :is="select" :uids="userids" ></component> 
      </div>
    </div>
  </div>
</div>
</template>
<script>
import { user_detail ,user_audio} from "../../network/user";
import {Age} from '../../components/tool/tool'
import idCard from '../../components/tool/card'

export default {
  data() {
    return {
      userids: null, //用户id
      userData:null, //用户所有信息
      userProfile:[], //用户 动态关注 粉丝
      bindings:[],  //用户绑定相关账号
      select:null,  //动态组件的选择
      userInfoFlag: true, //能否获取到用户所有信息的开关 有展示 没有展示无数据页面
      userCreated_DJdata : null,//用户创建电台数据
      userCreatedDj_Flag : false, //开关
    };
  },
  components: {
    Profile: () => import("./Profile.vue"),
    DT: () => import("./DT.vue"),
    GZ: () => import("./GZ.vue"),
    FS: () => import("./FS.vue"),
  },
  methods: {
    res_userData(id) {
      //获取用户信息
      user_detail(id).then(
        (res) => {  
          console.log(res)
          //向下面组件发送用户id 和是否公开用户听歌内容 累计听歌数量
            this.userids = {listenSongs:res.data.listenSongs , uid:res.data.userPoint.userId , peopleCanSeeMyPlayRecord : res.data.peopleCanSeeMyPlayRecord} 
          if(res.data.profile.djStatus == 10){  //如果用户有创建电台 获取用户电台
            this.userCreatedDj_Flag = true
            this.userCreated_dj(id)
          }
          this.userData = res.data  //总数居
          this.userProfile = [
          {type:'动态' ,num :res.data.profile.eventCount,p:{path:'/userEvent',query:{id:res.data.userPoint.userId}}} ,
          {type:'关注' ,num :res.data.profile.follows,p:{path:'/userFollows',query:{id:res.data.userPoint.userId}}} ,
          {type:'粉丝' ,num :res.data.profile.followeds,p:{path:'/userFans',query:{id:res.data.userPoint.userId}}}
          ]
          this.bindings = res.data.bindings.filter(value => { //过滤出微博绑定的
             return  value.type == 2
          })
        },
        (err) => {
          console.log("获取用户信息错误");
          this.userInfoFlag = false;
        }
      );
    },
    select_Com(com) {  
        //动态组件的转换
       if(com =='/userHome'){
          this.select = 'Profile'
       }
       if(com =='/userEvent'){
          this.select = 'DT'
       }
      if(com =='/userFollows'){
         this.select = 'GZ'
       }
       if(com =='/userFans'){
         this.select = 'FS'
       }
    },
    userCreated_dj(uid){         
       //用户创建的电台
        user_audio(uid).then(res => {
         this.userCreated_DJdata = res.data.djRadios
          // var obj = {
          //       picUrl : res.data.djRadios[0].picUrl, //封面图片
          //       name : res.data.djRadios[0].name,    //名称
          //       subCount :res.data.djRadios[0].subCount, //订阅
          //       programCount:res.data.djRadios[0].programCount //第几期
          //   }
          // this.userCreated_DJdata = obj
        })
    }
  },
  filters:{
    Time(value){
      return Age(value)  
    },
    city(value){
       return idCard.getAreaByIdCard(value)
    }
  },
  watch:{
     $route(to){
       console.log(to)
       this.userData = null
       this.userProfile = []
       this.bindings = []
       this.userCreatedDj_Flag = false
       this.res_userData(to.query.id)
       this.select_Com(this.$route.path)
     }
  },
  created() {
    this.res_userData(this.$route.query.id);
    this.select_Com(this.$route.path)
  }
};
</script>

<style scoped>
.m-top {
    position: relative;
    z-index: 910;
    height: 70px;
    box-sizing: border-box;
    background: #242424;
    border-bottom: 1px solid #000;
}
.m-subnav {
    z-index: 90;
    height: 35px;
    box-sizing: border-box;
    background-color: #C20C0C;
    border-bottom: 1px solid #a40011;
}
.g-db {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;
}
.g-wrap {
  padding: 40px;
}
.n-for404 {
    padding: 125px 0 0;
    text-align: center;
}
.u-errlg {
    width: 270px;
    height: 112px;
}
.u-slg, .u-slg2, .u-slg3, .u-blg, .u-mlg, .u-mlg2, .u-errlg {
    display: inline-block;
    vertical-align: middle;
    background: url("https://s2.music.126.net/style/web2/img/logo.png?5bba0b3865d039c2473c33a891cfeec9") no-repeat 0 9999px;
}
.n-for404 .note {
    margin-top: 35px;
    font-size: 18px;
    font-family: "Microsoft Yahei";
}
.u-errlg-404 {
    background-position: 0 -405px;
}
.m-proifo {
  margin-bottom: 43px;
}
.m-proifo dt {
  float: left;
  width: 188px;
  margin-right: 40px;
}
.m-proifo dt img {
  display: block;
  width: 180px;
  height: 180px;
  padding: 3px;
  background: rgb(255, 255, 255);
  border: 1px solid rgb(213, 213, 213);
}
.f-cb::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.m-proifo dd {
  float: left;
  width: 670px;
}
.m-proifo .name {
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgb(221, 221, 221);
}
.m-proifo .name .wrap {
  padding-bottom: 3px;
}
.m-proifo .name .edit {
    float: right;
    margin-top: 4px;
}
.m-proifo .name .tit {
  float: left;
  margin-top: 3px;
  font-size: 22px;
  font-weight: normal;
  line-height: 30px;
}
.m-proifo .name .djp {
    line-height: 20px;
    margin-top: 8px
}
.m-proifo .name .U_tag {
    width: 68px;
    height: 20px;
    margin-right: 6px;
    background-position: -150px -480px;
}
.m-proifo .yyrtag {
    display: inline-block;
    height: 16px;
    margin-left: 5px;
    padding: 0 2px;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.4);
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    border: solid 1px rgba(0, 0, 0, 0.3);
    border-radius: 2px;
}
.s-fc0,
a.s-fc0:hover {
  color: #000;
}
.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.m-proifo .name .lev {
  float: left;
  margin: 8px 0px 0px 10px;
}
.u-btn2-1 {
    color: #333;
    background-position: right -100px;
}
.u-btn2-1 i {
    color: #333;
    background-position: 0 -59px;
    padding: 0 15px 0 20px;
}
.u-icn2 {
  background: url("../../assets/imgs/icon2.png") no-repeat 0 9999px;
}
.u-icn,
.u-icn2,
.u-icn3 {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.u-lev {
  display: inline-block;
  height: 19px;
  overflow: hidden;
  padding-left: 29px;
  line-height: 21px;
  color: #e03a24;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
}
.u-icn2-lev {
  background-position: -135px -190px;
}
.u-lev i {
  float: right;
}
.Fu-title-1 {
    height: 33px;
}
.Fu-title {
    border-bottom: 2px solid #c20c0c;
}
.Fu-title-1 h3 {
    font-size: 20px;
    line-height: 28px;
}
.u-icn2-levr {
  width: 9px;
  height: 19px;
  background-position: -191px -190px;
}
.m-proifo .name .icn {
  float: left;
  margin: 9px 0 0 8px;
  position: unset;
}
.u-icn,
.u-title-1 .out .icon {
  background: url("../../assets/imgs/icon.png") no-repeat 0 9999px;
}
.u-icn-02 {
  width: 20px;
  height: 20px;
  background-position: -41px -27px;
}
.m-proifo .name .btn {
  float: left;
  margin: 4px 0 0 15px;
}
.u-btn {
  display: inline-block;
}
.u-btn,
div.u-page a,
div.u-page a.js-selected,
div.u-page a.znxt.js-disabled,
div.u-page a.zprv.js-disabled {
  background: url("../../assets/imgs/button.png") no-repeat 0 9999px;
}
.u-btn-7 {
  width: 75px;
  height: 31px;
  background-position: 0 -810px;
}
.u-btn-7 i {
  display: inline-block;
  height: 29px;
  line-height: 29px;
  padding-left: 30px;
}
.u-btn-8 {
  width: 40px;
  height: 31px;
  padding-left: 30px;
  background-position: 0 -720px;
  color: #fff;
  line-height: 30px;
}
.u-btn-5 {
  width: 81px;
  height: 31px;
  background-position: 0 -955px;
}
.u-btn-5 i {
  display: inline-block;
  height: 29px;
  line-height: 29px;
  padding-left: 25px;
  color: #666;
}
.u-btn-6,
.u-btn-ygz {
  width: 70px;
  height: 31px;
  background-position: 0 -919px;
}
.u-btn-6 i {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding-left: 26px;
  color: #666;
}
.m-proifo .data {
  height: 41px;
  margin-bottom: 15px;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.m-proifo .data {
  height: 41px;
  margin-bottom: 15px;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.m-proifo .data .fst {
  padding-left: 0;
  border-left: none;
}
.m-proifo .data li {
  float: left;
  padding: 0 40px 0 20px;
  border-left: 1px solid #ddd;
}
.m-proifo .data a {
  display: inline-block;
  position: relative;
  zoom: 1;
  color: #666;
}
.m-proifo .data strong {
  display: block;
  margin-top: -4px;
  font-size: 24px;
  font-weight: normal;
  cursor: pointer;
}
.m-proifo .data span {
  display: block;
  text-indent: 2px;
  cursor: pointer;
}
.m-proifo .inf {
  margin-bottom: 5px;
  line-height: 21px;
}
.f-brk {
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.m-proifo .inf .sep {
  margin-left: 20px;
}
.m-proifo .inf .tit {
    float: left;
}
.U_logo li {
    margin-left: 8px;
    height: 22px;
    float: left;
}
.u-slg {
    width: 20px;
    height: 20px;
    background: url("https://s2.music.126.net/style/web2/img/logo.png?34dbbb0cca3860ee2a48433c054f1da0") no-repeat 0 9999px;
    background-position: 0 0;
}
.m-create {
    border: 1px solid #e5e5e5;
    border-top: none;
}
.m-create .U_itm {
    height: 50px;
    padding: 10px 0;
    line-height: 50px;
}
.m-plylist .U_itm {
    float: left;
    width: 100%;
    background: #fff;
}
.m-plylist .bg {
    background: #f7f7f7;
}
.u-cover-3 {
    width: 50px;
    height: 50px;
}
.m-plylist .col {
    float: left;
    margin-left: 10px;
}
.m-create .cvr {
    margin-left: 20px;
}
.m-create .cnt {
    width: 500px;
    padding-right: 38px;
}
.m-plylist .col {
    float: left;
    margin-left: 10px;
}
.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.f-thide a:hover{
  text-decoration: underline 1px;
}
.f-pr {
    position: relative;
}

.u-icn, .u-icn2, .u-icn3 {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
}
.u-icn2-share, .u-icn2-fav, .u-icn2-del {
    width: 16px;
    height: 14px;
    background-position: -90px 0;
}
.m-create .cnt .icn {
    float: right;
    margin-right: 10px;
    text-indent: -9999px;
    cursor: pointer;
}
.m-create .col span{
  display: none;
  position: absolute;
    top: 36%;
    right: 0;
}
.m-create:hover{
   background-color: #f5f5f5;
}
.m-create .col-3 {
    width: 216px;
}
.m-create .col-4 {
    width: 44px;
}
.s-fc4, a.s-fc4:hover {
    color: #999;
}
</style>
